<template>
  <div id="app">
    <!-- 各功能模块 -->
    <div class="dashboard-container">

      <!-- Computed 示例 -->
      <section class="card computed-card">
        <h2>Vue Computed 示例</h2>
        <p>显示组合文本：{{ displayText }}</p>
        <input v-model="prefix1" placeholder="Prefix1 (e.g., Foo)">
        <input v-model="prefix2" placeholder="Prefix2 (e.g., Bar)">
        <input v-model="foo" placeholder="Suffix for Prefix1">
        <input v-model="bar" placeholder="Suffix for Prefix2">
      </section>

      <!-- Watch 示例 -->
      <section class="card watch-card">
        <h2>Vue Watch 示例</h2>
        <input v-model="foo" placeholder="Foo">
        <input v-model="bar" placeholder="Bar">
        <p>{{ displayText }}</p>
      </section>

      <!-- 问答示例 -->
      <section class="card question-card">
        <h2>Vue 问答示例</h2>
        <input v-model="question" placeholder="Ask a yes/no question..." />
        <p>回答: {{ answer }}</p>
      </section>

      <!-- 购物车 -->
      <section class="card cart-card">
        <h2>购物车</h2>
        <table class="cart-table">
          <thead>
            <tr>
              <th>商品名称</th>
              <th>单价</th>
              <th>数量</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in cartItems" :key="index">
              <td>{{ item.name }}</td>
              <td>¥{{ item.price }}</td>
              <td>
                <button @click="decreaseQuantity(index)" :disabled="item.quantity <= 1">-</button>
                {{ item.quantity }}
                <button @click="increaseQuantity(index)">+</button>
              </td>
              <td><button @click="removeItem(index)">移除</button></td>
            </tr>
          </tbody>
        </table>
        <p>总价：¥{{ total }}</p>
      </section>

      <!-- 字符串反转 -->
      <section class="card string-card">
        <h2>字符串反转示例</h2>
        <input v-model="inputString" placeholder="输入一段文字">
        <p>原始文本：{{ inputString }}</p>
        <p>反转文本（方法）：{{ reversedString }}</p>
        <p>反转文本（计算属性）：{{ computedReversedString }}</p>
      </section>

      <!-- 预留空页面 + 分页器 -->
      <section class="card empty-card">
        <h2>预留空面板</h2>
        <p>这里是未来可以扩展的内容区域。</p>

        <!-- 分页器 -->
        <div class="pagination">
          <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
          <span>第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
          <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
        </div>
      </section>

    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      cartItems: [
        { name: 'iPhone X', price: 7999, quantity: 1 },
        { name: '荣耀 16', price: 2399, quantity: 1 },
        { name: '华为 P22', price: 3399, quantity: 1 },
        { name: '小米 9', price: 3999, quantity: 4 }
      ],
      prefix1: 'Foo',
      prefix2: 'Bar',
      foo: '',
      bar: '',
      question: '',
      answer: '',
      inputString: 'helloworld',

      // 分页器数据
      currentPage: 1,
      itemsPerPage: 5,
      totalItems: 50
    };
  },
  computed: {
    total() {
      return this.cartItems.reduce((acc, item) => acc + item.price * item.quantity, 0);
    },
    reversedString() {
      return this.inputString.split('').reverse().join('');
    },
    computedReversedString() {
      return this.inputString.split('').reverse().join('');
    },
    displayText() {
      return `${this.prefix1}${this.foo} ${this.prefix2}${this.bar}`;
    },
    totalPages() {
      return Math.ceil(this.totalItems / this.itemsPerPage);
    }
  },
  methods: {
    increaseQuantity(index) {
      this.cartItems[index].quantity++;
    },
    decreaseQuantity(index) {
      if (this.cartItems[index].quantity > 1) {
        this.cartItems[index].quantity--;
      }
    },
    removeItem(index) {
      this.cartItems.splice(index, 1);
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    }
  },
  watch: {
    question(newQuestion) {
      this.answer = newQuestion.includes('?') ? 'yes' : 'no';
    }
  }
};
</script>

<style scoped>
#app {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f5f7fa;
  padding: 40px 20px;
  color: #333;
}

.dashboard-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 20px;
  transition: box-shadow 0.3s ease;
}

.card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.card h2 {
  margin-top: 0;
  font-size: 1.2em;
  margin-bottom: 15px;
  color: #2c3e50;
}

input {
  width: calc(100% - 20px);
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

.cart-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

th, td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
}

th {
  background-color: #f2f2f2;
}

button {
  cursor: pointer;
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: white;
  font-weight: bold;
}

button:hover {
  background-color: #0056b3;
}

button:disabled {
  background-color: #aaa;
  cursor: not-allowed;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.pagination span {
  font-size: 14px;
  color: #555;
}
</style>